<template>
    <div class="loading-view" :style="{display:(loadingShow?'':'none')}">
      <div class="loading-box">
        <div class="loading">
          <span class="object" id="object_one"></span>
          <span class="object" id="object_two"></span>
          <span class="object" id="object_three"></span>
        </div>
        <div>
          <p>{{loadingText}}</p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'v-loading',
  props:{
    loadingShow: {
      type: Boolean,
      default: true
    },
    loadingText: {
      type: String,
      default: '加载中...'
    }
  }
}
</script>

<style lang="less" scoped>
.loading-view {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100%);
  width: calc(100%);
  z-index: 1000;
  background-color: slategray;
}
.loading-box {
  position: absolute;
  text-align: center;
  z-index: 1010;
  top: calc(~"50% - 75px");
  left: calc(~"50% - 150px");
  height: 150px;
  width: 300px;
  .loading {
    height: 80px;
    margin-left: 90px;
  }
  p {
    text-align: center;
    padding: 10px;
    font-size: 8px;
    color: #fff;
  }
}
.object {
  width: 20px;
  height: 20px;
  background-color: #fff;
  float: left;
  margin-right: 20px;
  margin-top: 65px;
  -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
}

#object_one {
  -webkit-animation: object_one 1.5s infinite;
  animation: object_one 1.5s infinite;
}
#object_two {
  -webkit-animation: object_two 1.5s infinite;
  animation: object_two 1.5s infinite;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
#object_three {
  -webkit-animation: object_three 1.5s infinite;
  animation: object_three 1.5s infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
@-webkit-keyframes object_one {
  75% {
    -webkit-transform: scale(0);
  }
}
@keyframes object_one {
  75% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
}
@-webkit-keyframes object_two {
  75% {
    -webkit-transform: scale(0);
  }
}

@keyframes object_two {
  75% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
}

@-webkit-keyframes object_three {
  75% {
    -webkit-transform: scale(0);
  }
}

@keyframes object_three {
  75% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
}
</style>